<template>
  <div>
    <div class="demo-collapse">
      <el-collapse accordion>
        <template v-for="(item,index) in orderList" :key="index">
          <el-collapse-item :name="item.id">
            <template #title>
              <IEpShop/>
              <el-tag>{{ item.create_at }}</el-tag>
              <el-tag>总价: {{ item.price }}</el-tag>
              <el-tag>备注: {{ item.remark }}</el-tag>
            </template>
              <card :foodList="item.food_list"></card>
          </el-collapse-item>
        </template>

      </el-collapse>
    </div>
  </div>
</template>

<script setup lang="ts">
import {getOrder} from "../../../api/epgms/menu/order";
import {onMounted, reactive, ref} from "vue";
import {getFood} from "../../../api/epgms/menu/food";
import card from "./compoments/card/index.vue"

const orderList = reactive([])

//获取分类
const getOrderFunc = async () => {
  orderList.splice(0, orderList.length)
  const { data: { order_list } } = await getOrder()
  console.log(order_list)

  for (const orderListElement of order_list) {
    for (const orderListElementElement of orderListElement.food_list) {
      orderListElementElement.image = import.meta.env.VITE_MENU_PATH + "/" + orderListElementElement.image
    }
    // console.log(foodListElement.image)
  }

  orderList.push(...order_list)
  // console.log(data)
  // category.value = data.category_list
}
getOrderFunc()

const food = ref([])
</script>

<style>
svg{
  margin-right: 10px;;
}
.el-tag{
  margin-right: 10px;
}
</style>